<template>
  <el-row id="big-screen-container">
    <!--标题栏-->
    <el-row type="flex" class='bsc-tittle-layout'>
      <el-col><span class="font-title">{{info.companyName}}</span></el-col>
      <el-col class="tittle-right-layout">
        <span class="font-day">{{dateInfo.day}}</span>
        <br><span class="font-week">{{dateInfo.week}}</span>
        <span class="font-second">{{dateInfo.second}}</span>
      </el-col>
    </el-row>

    <!--标题下一栏-->
    <el-row type="flex" class="bsc-second-layout">
      <el-col :span="8">
        <el-row class="bsc-efficiency">
          <el-row type="flex" class="bsc-body-tittle">
            <el-col class="ball"></el-col>
            <span style="color: white">[日全厂能效比]</span>
          </el-row>
          <el-row>
            <el-col :span="8">
              <span style="color: #2c8eff">{{dailyFactoryEfficiencyRatio.dailyFactoryInput | ChangeValue | NumFormat}}</span>
            </el-col>
            <el-col :span="8">
              <span style="color: #00ffff">{{dailyFactoryEfficiencyRatio.dailyFactoryOut | NumFormat}}</span>
            </el-col>
            <el-col :span="8">
              <span style="color: #00d80f">{{dailyFactoryEfficiencyRatio.ratio}}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8"><span>日全厂输入</span></el-col>
            <el-col :span="8"><span>日全厂输出</span></el-col>
            <el-col :span="8"><span>日全厂能效比</span></el-col>
          </el-row>
          <el-row>
           <!-- <el-col :span="8"><span>{{dailyFactoryEfficiencyRatio.unit}}</span></el-col>
            <el-col :span="8"><span>{{dailyFactoryEfficiencyRatio.unit}}</span></el-col> -->
            <el-col :span="8"><span>Tce</span></el-col>
            <el-col :span="8"><span>Tce</span></el-col>
            <el-col :span="8"><span>%</span></el-col>
          </el-row>
        </el-row>
      </el-col>
      <el-col :span="16">
        <el-row type="flex" class="bsc-factory-all">
          <el-col :span="4">
            <el-row type="flex"><span>年全厂总能耗</span></el-row>
            <el-row type="flex"><span>{{grossSection.yearTotalFactoryEnergyConsumption | ChangeValue | NumFormat}}</span></el-row>
            <el-row type="flex"><span>Tce</span></el-row>
           <!-- <el-row type="flex"><span>{{grossSection.unit}}</span></el-row>-->
          </el-col>
          <el-col :span="4">
            <el-row type="flex"><span>月全厂总能耗</span></el-row>
            <el-row type="flex"><span>{{grossSection.monthTotalFactoryEnergyConsumption | ChangeValue | NumFormat}}</span></el-row>
            <el-row type="flex"><span>Tce</span></el-row>
           <!-- <el-row type="flex"><span>{{grossSection.unit}}</span></el-row>-->
          </el-col>
          <el-col :span="4">
            <el-row type="flex"><span>年全厂总电耗</span></el-row>
            <el-row type="flex"><span>{{grossSection.yearTotalFactoryElectricityConsumption | NumFormat}}</span></el-row>
            <el-row type="flex"><span>{{grossSection.electricityUnit}}</span></el-row>
          </el-col>
          <el-col :span="4">
            <el-row type="flex"><span>年全厂总煤耗</span></el-row>
            <el-row type="flex"><span>{{grossSection.yearTotalFactoryCoalConsumption | NumFormat}}</span></el-row>
            <el-row type="flex"><span>{{grossSection.coalUnit}}</span></el-row>
          </el-col>
          <el-col :span="4">
            <el-row type="flex"><span>年全厂总气耗</span></el-row>
            <el-row type="flex"><span>{{grossSection.yearTotalFactoryGasConsumption | NumFormat}}</span></el-row>
            <el-row type="flex"><span>{{grossSection.gasUnit}}</span></el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!--主内容区-->
    <el-row class="bsc-three-layout">
      <el-col :span="8">
        <el-row class="bsc-content-layout">
          <el-row type="flex" class="bsc-body-tittle">
            <el-col class="ball"></el-col>
            <span style="color: white">[日能耗趋势]</span>
          </el-row>
          <el-row>
            <BaseEchartsComponent ref="BSCDayPowerLineChart" :id="'bsc-day-power-chart'" :data="dayLineChartsOptions"/>
          </el-row>
        </el-row>

        <el-row class="bsc-content-layout">
          <el-row type="flex" class="bsc-body-tittle">
            <el-col class="ball"></el-col>
            <span style="color: white">[日能耗]</span>
          </el-row>
          <el-row class="bsc-content-day-power">
            <el-row>
              <el-col :span="8"><span>{{typeOfDailyEnergyConsumption[0].name}}</span></el-col>
              <el-col :span="8"><span>{{typeOfDailyEnergyConsumption[1].name}}</span></el-col>
              <el-col :span="8"><span>{{typeOfDailyEnergyConsumption[2].name}}</span></el-col>
            </el-row>
            <el-row>
              <el-col :span="8"><span>{{typeOfDailyEnergyConsumption[0].value | NumFormat}}</span></el-col>
              <el-col :span="8"><span>{{typeOfDailyEnergyConsumption[1].value | NumFormat}}</span></el-col>
              <el-col :span="8"><span>{{typeOfDailyEnergyConsumption[2].value | NumFormat}}</span></el-col>
            </el-row>
            <el-row>
              <el-col :span="8"><span>{{typeOfDailyEnergyConsumption[0].unit}}</span></el-col>
              <el-col :span="8"><span>{{typeOfDailyEnergyConsumption[1].unit}}</span></el-col>
              <el-col :span="8"><span>{{typeOfDailyEnergyConsumption[2].unit}}</span></el-col>
            </el-row>
          </el-row>

        </el-row>

        <el-row class="bsc-content-layout">
          <el-row type="flex" class="bsc-body-tittle">
            <el-col class="ball"></el-col>
            <span style="color: white">[重点工序日耗能排序]</span>
          </el-row>
          <el-row>
            <dv-scroll-ranking-board :config="processConfig" style="width:100%;height:20vh;padding: 10px"/>
          </el-row>

        </el-row>

      </el-col>
      <el-col :span="8">
        <el-row class="bsc-content-layout">
          <el-row type="flex" class="bsc-body-tittle">
            <el-col class="ball"></el-col>
            <span style="color: white">[能耗占比]</span>
          </el-row>
          <el-row class="bsc-content-ratio">
            <el-row type="flex">
              <el-col :span="12">
                <dv-active-ring-chart :config="monthPieChartsOptions" style="width:100%;height:90%"/>
                <el-row type="flex"><span>月各能耗占比</span></el-row>
                <!--<BaseEchartsComponent ref="BSC-MonthPieChart" :id="'bsc-month-pie-chart'" :data="pieChartsOptions" />-->
              </el-col>
              <el-col :span="12">
                <dv-active-ring-chart :config="dayPieChartsOptions" style="width:100%;height:90%"/>
                <el-row type="flex"><span>日各能耗占比</span></el-row>
                <!-- <BaseEchartsComponent ref="BSC-DayPieChart" :id="'bsc-day-pie-chart'" :data="pieChartsOptions" />-->
              </el-col>
            </el-row>
            <el-row type="flex">
              <!-- <dv-charts :option="compareOption" />-->
              <BaseEchartsComponent ref="BSCCompareBarChart" :id="'bsc-compare-chart'" :data="compareOption"/>
            </el-row>

          </el-row>
        </el-row>

        <el-row class="bsc-content-layout">
          <el-row type="flex" class="bsc-body-tittle">
            <el-col class="ball"></el-col>
            <span style="color: white">[重点设备日耗能排序]</span>
          </el-row>
          <el-row>
            <dv-scroll-ranking-board :config="deviceConfig" style="width:100%;height:20vh;padding: 10px"/>
          </el-row>
        </el-row>

      </el-col>
      <el-col :span="8">
        <el-row class="bsc-content-layout">
          <el-row type="flex" class="bsc-body-tittle">
            <el-col class="ball"></el-col>
            <span style="color: white">[年能耗趋势]</span>
          </el-row>
          <el-row>
            <BaseEchartsComponent ref="BSCYearPowerLineChart" :id="'bsc-year-power-chart'" :data="yearLineChartsOptions"/>
          </el-row>
        </el-row>

        <el-row class="bsc-content-layout">
          <el-row type="flex" class="bsc-body-tittle">
            <el-col class="ball"></el-col>
            <span style="color: white">[月能耗趋势]</span>
          </el-row>
          <el-row>
            <BaseEchartsComponent ref="BSCMonthPowerLineChart" :id="'bsc-month-power-chart'"
                                  :data="monthLineChartsOptions"/>
          </el-row>

        </el-row>

        <el-row class="bsc-content-layout">
          <el-row type="flex" class="bsc-body-tittle">
            <el-col class="ball"></el-col>
            <span style="color: white">[重点工序单元日耗能排序]</span>
          </el-row>
          <el-row>
            <dv-scroll-ranking-board :config="processUnitConfig" style="width:100%;height:20vh;padding: 10px"/>
          </el-row>

        </el-row>

      </el-col>
    </el-row>


  </el-row>

</template>


<script>

  import BaseEchartsComponent from "../../components/BaseEcharts/index";
  import myEchartsOptions from '../../chart-options/echartsOptions'
  import CanvasCircle from "../../components/CanvasCircle/index";
  import {DateTime} from '../../utils/dateTime'

  export default {
    name: "index",
    components: {CanvasCircle, BaseEchartsComponent},
    mounted() {
      let _that = this

      _that.dayLineChartsOptions.xAxis[0].data = []
      _that.dayLineChartsOptions.series[0].data = []
      _that.dayLineChartsOptions.xAxis[0].axisLine.lineStyle.color = '#fff'
      _that.dayLineChartsOptions.yAxis[0].axisLine.lineStyle.color = '#fff'
      _that.dayLineChartsOptions.grid.left = 60
      _that.dayLineChartsOptions.grid.right = 60
      _that.dayLineChartsOptions.title.text = '单位'

      _that.yearLineChartsOptions.xAxis[0].data = []
      _that.yearLineChartsOptions.series[0].data = []
      _that.yearLineChartsOptions.grid.left = 60
      _that.yearLineChartsOptions.grid.right = 60
      _that.yearLineChartsOptions.xAxis[0].axisLine.lineStyle.color = '#fff'
      _that.yearLineChartsOptions.yAxis[0].axisLine.lineStyle.color = '#fff'
      _that.yearLineChartsOptions.title.text = '单位'

      _that.monthLineChartsOptions.xAxis[0].data = []
      _that.monthLineChartsOptions.series[0].data = []
      _that.monthLineChartsOptions.grid.left = 60
      _that.monthLineChartsOptions.grid.right = 60
      _that.monthLineChartsOptions.xAxis[0].axisLine.lineStyle.color = '#fff'
      _that.monthLineChartsOptions.yAxis[0].axisLine.lineStyle.color = '#fff'
      _that.monthLineChartsOptions.title.text = '单位'

      // this.$refs.cptsCbdLineChart.drawLineGraph('bsc-day-power-chart',_that.lineChartsOptions)

      this.initDate()
      this.askTimer()


    },
    filters:{
      NumFormat(mValue){
        if(!mValue) return '0.00';
        var value = Number(mValue).toFixed(2)
        var intPart = value - value%1; //获取整数部分
        var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); //将整数部分逢三一断

        var floatPart = ".00"; //预定义小数部分
        var value2Array = value.toString().split(".");

        //=2表示数据有小数位
        if(value2Array.length == 2) {
          floatPart = value2Array[1].toString(); //拿到小数部分

          if(floatPart.length == 1) { //补0,实际上用不着
            return intPartFormat + "." + floatPart + '0';
          } else {
            return intPartFormat + "." + floatPart;
          }
        } else {
          return intPartFormat + floatPart;
        }
      },
      ChangeValue(value){
        if(!value) return 0;
        return (Number(value)/1000).toString()
      }
    },
    data() {
      return {
        info: {
          companyName: '山东圣奥化学科技有限公司',
        },
        dateInfo: {
          day: '',
          week: '',
          second: ''
        },
        processConfig: {
          data: [],
          unit: ''
        },
        processUnitConfig: {
          data: [],
          unit: ''
        },
        deviceConfig: {
          data: [],
          unit: ''
        },
        dayLineChartsOptions: this.validateGlobal.cloneObject(myEchartsOptions.lineChartsOption),
        yearLineChartsOptions: this.validateGlobal.cloneObject(myEchartsOptions.lineChartsOption),
        monthLineChartsOptions: this.validateGlobal.cloneObject(myEchartsOptions.lineChartsOption),
        lineChartsOptions: this.validateGlobal.cloneObject(myEchartsOptions.lineChartsOption),
        monthPieChartsOptions: {
          radius: '60%',
          activeRadius: '70%',
          digitalFlopStyle: {
            fontSize: 18
          },
          data: []
        },
        dayPieChartsOptions: {
          radius: '60%',
          activeRadius: '70%',
          digitalFlopStyle: {
            fontSize: 18
          },
          data: []
        },
        compareOption: this.validateGlobal.cloneObject(myEchartsOptions.barChartsOptions2),
        dailyFactoryEfficiencyRatio: {
            dailyFactoryInput: null,
            dailyFactoryOut: 0,
            ratio: 0,
            unit: "折标准煤"
        },
        grossSection:{
          yearTotalFactoryEnergyConsumption: 0,
          monthTotalFactoryEnergyConsumption: 0,
          yearTotalFactoryElectricityConsumption: 0,
          electricityUnit: "",
          yearTotalFactoryGasConsumption: 0,
          gasUnit: '',
          yearTotalFactoryCoalConsumption: 0,
          coalUnit: '',
          unit: ''
        },
        typeOfDailyEnergyConsumption:[{
          name: '能源项',
          value: 0,
          unit: ''
        },{
          name: '能源项',
          value: 0,
          unit: ''
        },{
          name: '能源项',
          value: 0,
          unit: ''
        }],
      }
    },
    methods:{
      initDate(){
        let _that = this
        this.timerForDate = setInterval(() => {
          let dateTime = new DateTime()
          let week = dateTime.getWeek()
          let date = dateTime.getDate()
          let dateForS = dateTime.getTimeToS()
          let dateForDay =  date.replace(/\./g,'\-')
          _that.dateInfo.day = dateForDay
          _that.dateInfo.second = dateForS
          _that.dateInfo.week = week
        }, 1000)
      },
      askTimer(){
        let _that = this
        _that.askInfo()
        this.timerForAsk = setInterval(() => {
           _that.askInfo()
        }, 1000*60*1)
      },
      askInfo(){
        let _that = this
        let userId = sessionStorage.getItem("userId")
        let url = _that.ports.bigScreen.bigScreenUrl
        let askData = {
          userId: userId,
        }
        _that.http.get(url,askData, res => {
          if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
            console.log("bigScreen",res.data)
            // 日全厂能耗比
            if (res.data.dailyFactoryEfficiencyRatio) {
              _that.dailyFactoryEfficiencyRatio = res.data.dailyFactoryEfficiencyRatio
            }

            // 全厂总能耗
            if (res.data.grossSection){
              _that.grossSection = res.data.grossSection
            }

            // 日能耗趋势
            if (res.data.hourEnergyConsumptions){
              _that.dayLineChartsOptions.xAxis[0].data = res.data.hourEnergyConsumptions.times
              _that.dayLineChartsOptions.series[0].data = res.data.hourEnergyConsumptions.values
              _that.dayLineChartsOptions.title.text = res.data.hourEnergyConsumptions.unit
              _that.$refs.BSCDayPowerLineChart.drawLineGraph('bsc-day-power-chart',_that.dayLineChartsOptions)
            }

            // 年能耗趋势
            if (res.data.monthEnergyConsumptions){
              _that.yearLineChartsOptions.xAxis[0].data = res.data.monthEnergyConsumptions.times
              _that.yearLineChartsOptions.series[0].data = res.data.monthEnergyConsumptions.values
              _that.yearLineChartsOptions.title.text = res.data.monthEnergyConsumptions.unit
              _that.$refs.BSCYearPowerLineChart.drawLineGraph('bsc-year-power-chart',_that.yearLineChartsOptions)
            }

            // 月能耗趋势
            if (res.data.dayEnergyConsumptions){
              _that.monthLineChartsOptions.xAxis[0].data = res.data.dayEnergyConsumptions.times
              _that.monthLineChartsOptions.series[0].data = res.data.dayEnergyConsumptions.values
              _that.monthLineChartsOptions.title.text = res.data.dayEnergyConsumptions.unit
              _that.$refs.BSCMonthPowerLineChart.drawLineGraph('bsc-month-power-chart',_that.monthLineChartsOptions)
            }


            // 日能耗
            if (res.data.typeOfDailyEnergyConsumption){
              _that.typeOfDailyEnergyConsumption = res.data.typeOfDailyEnergyConsumption
            }

            // 工序排序
            if (res.data.processes){
              _that.processConfig = {
                data: res.data.processes,
               /* unit:  res.data.processes[0].unit*/
                unit:  ''
              }
            }

            // 设备排序
            if (res.data.facilities){
              _that.deviceConfig = {
                data: res.data.facilities,
               /* unit:  res.data.facilities[0].unit*/
                unit:  ''
              }
            }

            // 工序单元排序
            if (res.data.processElements){
              _that.processUnitConfig = {
                data: res.data.processElements,
              /*  unit:  res.data.processElements[0].unit*/
                unit:  ''
              }
            }

            // 能耗占比
            if (res.data.energyConsumptionRatio) {
              if (res.data.energyConsumptionRatio.monthConsumption) {
                let arry = []
                for(let i = 0;i<res.data.energyConsumptionRatio.monthConsumption.names.length;++i){
                  let obj = {}
                  obj.name = res.data.energyConsumptionRatio.monthConsumption.names[i]
                  obj.value = res.data.energyConsumptionRatio.monthConsumption.values[i]
                  arry.push(obj)
                }
                _that.monthPieChartsOptions = {
                  radius: '60%',
                  activeRadius: '70%',
                  digitalFlopStyle: {
                    fontSize: 18
                  },
                  data: arry
                }
              }
              if (res.data.energyConsumptionRatio.dailyConsumption) {
                let arry = []
                for(let i = 0;i<res.data.energyConsumptionRatio.dailyConsumption.names.length;++i){
                  let obj = {}
                  obj.name = res.data.energyConsumptionRatio.dailyConsumption.names[i]
                  obj.value = res.data.energyConsumptionRatio.dailyConsumption.values[i]
                  arry.push(obj)
                }
                _that.dayPieChartsOptions = {
                  radius: '60%',
                  activeRadius: '70%',
                  digitalFlopStyle: {
                    fontSize: 18
                  },
                  data: arry
                }
              }

              _that.compareOption.dataset.source = [['power', '当前', '对比值'],
                ['同比', res.data.energyConsumptionRatio.currentMonthEnergyConsumption, res.data.energyConsumptionRatio.lastMonthEnergyConsumption],
                ['环比',res.data.energyConsumptionRatio.currentDayEnergyConsumption, res.data.energyConsumptionRatio.lastDayEnergyConsumption]]
              _that.$refs.BSCCompareBarChart.drawLineGraph('bsc-compare-chart',_that.compareOption)
            }
          }
        })
      }
    },
    beforeDestroy(){
      clearInterval(this.timerForDate)
      clearInterval(this.timerForAsk)
    }
  }
</script>

<style lang="scss">
  #big-screen-container {
    width: 100vw;
    height: 100vh;
    background-color: #051551;
    /*background-color: #cce8cf;*/

    .bsc-tittle-layout {
      height: 6vh;
      /*border: 1px solid red;*/
      align-items: center;
      padding-left: 20px;

      .tittle-right-layout {
        height: 100%;
        width: 10vw;
        /*border: 1px solid red;*/
        margin-right: 20px;
      /*  display: -webkit-flex;
        display: -moz-flex;
        display: -o-flex;
        display: flex;
        justify-content: center;*/
      }
    }

    .bsc-second-layout {
      /*border: 1px solid red;*/
      height: 16vh;

      > .el-col {
        height: 100%;
        /*border: 2px solid #25a4bb;*/
      }

      .bsc-efficiency {
        /*padding: 20px;*/
        /*border: #051b6a solid 1px;*/
        height: 100%;
        margin-right: 10px;
        margin-left: 10px;
        background: -webkit-linear-gradient(left, #042491, #021146);
        background: -o-linear-gradient(left, #042491, #021146);
        background: -moz-linear-gradient(left, #042491, #021146);
        background: linear-gradient(to right, #042491, #021146);
        /* height: 17.5%;
         margin-top: 0.7%;
         margin-left: 0.2%;
         margin-right: 0.6%;*/

        /*   .el-row:nth-child(1){
             background-color: #011f51;
             align-items: center;
             height: 4vh;
             span{
               margin-left: 10px;
               font-weight: bold;
               font-size: 0.8vw;
             }
           }*/

        .el-row:nth-child(2) {
          margin-top: 20px;

          .el-col {
            display: flex;
            display: -webkit-flex;
            display: -moz-flex;
            display: -o-flex;
            justify-content: center;
          }

          span {
            line-height: 100%;
            font-size: 1.4vw;
            font-weight: bold
          }
        }

        .el-row:nth-child(3), .el-row:nth-child(4) {
          margin-top: 10px;

          .el-col {
            display: flex;
            display: -webkit-flex;
            display: -moz-flex;
            display: -o-flex;
            justify-content: center;
          }

          span {
            color: white;
            line-height: 100%;
            font-size: 0.6vw
          }
        }
      }

      > .el-col:nth-child(2) {
        background-color: #031044;
        padding-top: 20px;
        padding-bottom: 20px;

        .bsc-factory-all {
          justify-content: space-around;
          height: 100%;

          > .el-col {
            height: 100%;
            /*background: white;*/
            box-shadow: 0 0 0.5vw #237ad4 inset;
            background: linear-gradient(#1359df, #1359df) left top,
            linear-gradient(#1359df, #1359df) left top,
            linear-gradient(#1359df, #1359df) right top,
            linear-gradient(#1359df, #1359df) right top,
            linear-gradient(#1359df, #1359df) left bottom,
            linear-gradient(#1359df, #1359df) left bottom,
            linear-gradient(#1359df, #1359df) right bottom,
            linear-gradient(#1359df, #1359df) right bottom;
            background-repeat: no-repeat;
            background-size: 0.1vw 1vw, 1.5vw 0.1vw;

            > .el-row {
              justify-content: center;
            }

            > .el-row:first-child {
              color: #17cedc;
              font-size: 1vw;
              margin-top: 20px;
            }

            > .el-row:nth-child(2) {
              color: #fbfc0b;
              font-size: 1.2vw;
              margin-top: 10px;
            }

            > .el-row:last-child {
              color: #37a2da;
              font-size: 0.8vw;
              margin-top: 10px;
            }
          }
        }
      }

    }

    .bsc-three-layout {
      /*border: 1px solid red;*/
      height: 78vh;

      > .el-col {
        height: 100%;
        /*border: 1px solid green;*/
      }

      > .el-col:nth-child(1) > .el-row:nth-child(1) {
        margin-top: 10px;
        height: 30vh;
        /*border: 1px solid red;*/
      }

      > .el-col:nth-child(1) > .el-row:nth-child(2) {
        margin-top: 10px;
        height: 16vh;
        /*border: 1px solid red;*/
      }

      > .el-col:nth-child(1) > .el-row:nth-child(3) {
        margin-top: 10px;
        height: 28vh;
        /*border: 1px solid red;*/
      }

      > .el-col:nth-child(2) > .el-row:nth-child(1) {
        margin-top: 10px;
        height: 47vh;
        /*border: 1px solid red;*/
      }

      > .el-col:nth-child(2) > .el-row:nth-child(2) {
        margin-top: 10px;
        height: 28vh;
        /*border: 1px solid red;*/
      }

      > .el-col:nth-child(3) > .el-row:nth-child(1) {
        margin-top: 10px;
        height: 23vh;
        /*border: 1px solid red;*/
      }

      > .el-col:nth-child(3) > .el-row:nth-child(2) {
        margin-top: 10px;
        height: 23vh;
        /*border: 1px solid red;*/
      }

      > .el-col:nth-child(3) > .el-row:nth-child(3) {
        margin-top: 10px;
        height: 28vh;
        /*border: 1px solid red;*/
      }

    }

    .bsc-content-ratio {
      height: 43vh;

      > .el-row {
        height: 50%;
        /*border: 1px solid red;*/

        > .el-col {
          height: 100%;
          /*border: 1px solid green;*/

          > .el-row {
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 1vh;
          }
        }
      }
    }

    #bsc-day-power-chart {
      width: 100%;
      height: 25vh;
    }

    #bsc-year-power-chart {
      width: 100%;
      height: 18vh;
    }

    #bsc-month-power-chart {
      width: 100%;
      height: 18vh;
    }

    #bsc-month-pie-chart, #bsc-day-pie-chart, #bsc-compare-chart {
      width: 100%;
      height: 100%;
    }

    .bsc-content-day-power {
      .el-col {
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        display: -o-flex;
        justify-content: center;
      }

      > .el-row:nth-child(1) {
        margin-top: 2vh;

        span {
          color: #00ffff;
          font-weight: bold;
          font-size: 0.8vw;
        }
      }

      > .el-row:nth-child(2) {
        margin-top: 2vh;

        span {
          color: white;
        }
      }

      > .el-row:nth-child(3) {
        margin-top: 2vh;

        span {
          color: white;
        }
      }
    }

    .bsc-content-layout {
      margin-left: 10px;
      margin-right: 10px;
      background-color: #031044;
      /*border: 1px solid #68a4ea;*/
    }

    .bsc-body-tittle {
      background-color: #011f51;
      align-items: center;
      height: 4vh;

      span {
        margin-left: 10px;
        font-weight: bold;
        font-size: 0.8vw;
      }
    }

    .ball {
      margin-left: 10px;
      background-color: yellow;
      border-radius: 50%;
      width: 15px;
      height: 15px;
    }


    .font-title {
      color: #68a4ea;
      font-size: 1.2vw;
      font-weight: bold;
    }

    .font-day {
      color: #00ffff;
      font-size: 1.4vw;
      font-family: digital-7-italic
    }

    .font-week {
      color: #68a4ea;
      font-size: 1vw;
      margin-right: 5px
    }

    .font-second {
      color: #00fa00;
      font-size: 1.4vw;
      font-family: digital-7-italic
    }

  }

</style>
